<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="1124" height="720"></canvas>
		<audio controls="controls" autoplay="autoplay" src="mp3/张靓颖 - 心电感应808.mp3" ></audio>
		<script type="text/javascript">
var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				],//9
				[
				    [0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				]
			];
			
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var text = [0,0,10,0,0,10,0,0];
		var img = new Image();
		img.src = "img/CHCDEKB100AO0001.jpg";
//		var date = new Date();//打印的时间 2017-11-18
		var date = new Date();
		var balls = [];
		img.onload = function(){
		setInterval(function(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		    ctx.drawImage(img, 0, 0);
			
			var time =new Date();
			if(time.getSeconds()!=date.getSeconds()){
				var gw = date.getSeconds() % 10;
						addBall(940, 10, gw);
						var sw1 = parseInt(date.getSeconds() / 10);
						var sw2 = parseInt(time.getSeconds() / 10);
						if(sw1 != sw2) {
							addBall(780, 10, sw1);
						}
				//秒数变了
				date = time;
				//添加小球
                }

			var r = 10;
				
				
				var r = parseInt(Math.random()*256);
				var g = parseInt(Math.random()*256);
				var b = parseInt(Math.random()*256);
				var a = Math.random();
				var color= "rgba("+ r +","+ g +","+ b +","+ a +")";
				var vx = (Math.random() * 5) + 5;
				if(Math.random() > 0.5) {
					vx = -vx;
				}

				var vy = (Math.random() * 10) + 5;
				if(Math.random() > 0.5) {
					vy = -vy;
				}
//				balls.push([1000,100,10,vx,vy,color]);
//				}
//		}
				text[0] = parseInt(date.getHours()/10);
			    text[1] = date.getHours()%10;
			    text[3] = parseInt(date.getMinutes()/10);
			    text[4] = date.getMinutes()%10;
			    text[6] = parseInt(date.getSeconds()/10);
			    text[7] = date.getSeconds()%10;
			    for(var i = 0;i<text.length;i++){
				if(i==0||i==1){
					drawNumber(i*160+10,10,text[i]);	
				} 
				if(i==2){
					drawNumber(i*160-10,10,text[i]);
				}
				if(i==3||i==4){
					drawNumber(i*160-90,10,text[i]);
				}
				if(i==5){
					drawNumber(i*160-110,10,text[i]);
				}
				if(i==6||i==7){
					drawNumber(i*160-190,10,text[i]);
				}
			}	
			    drawBalls();
			    
				},33)
		};
		
//		ctx.fillStyle="black";
//		ctx.fillRect(0,0,1300,600);
		
//		var number1 = numbers[3];
//		var x = 10;
//		var y = 10;
//		var R = 10;
              function addBall(ball1X, ball1Y, number) {
				for(var i = 0; i < numbers[number].length; i++) {
					var t1 = i * 20;
					for(var k = 0; k < numbers[number][i].length; k++) {
						var l1 = k * 20;
						if(numbers[number][i][k] == 1) {
//							//添加小球
							var vx = (Math.random() * 5) + 5;
							if(Math.random() > 0.5) {
								vx = -vx;
							}

							var vy = (Math.random() * 10) + 5;
							if(Math.random() > 0.5) {
								vy = -vy;
							}
							var r = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var a = Math.random();
							var color = "rgba(" + r + "," + g + "," + b + "," + a + ")"
//								x,y,r,vx,vy,color
							balls.push([ball1X + l1, ball1Y + t1, 10, vx, vy, color]);
						}
					}
				}

			}
        function drawBalls(){
        	for(var i = 0; i<balls.length;i++){
        		ctx.beginPath();
        		ctx.fillStyle=balls[i][5];
        		ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
        		ctx.fill();
        		balls[i][0] = balls[i][0] + balls[i][3];
        		balls[i][1] = balls[i][1] + balls[i][4];
        		balls[i][4] = balls[i][4] + 3;
        		if(balls[i][1] > canvas.height - balls[i][2]) {

						balls[i][4] = -balls[i][4] * 0.5;
						balls[i][1] = canvas.height - balls[i][2];
        	}
        }
        }

        function drawNumber(arcX,arcY,num){
        	var number1 = numbers[num];
        	var R = 10;
        	for(var i =0;i<number1.length;i++){
        		var y = arcY+2*R*i;
        		for(var k = 0;k<number1[i].length;k++){
        			if(number1[i][k] == 1){
        			var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
//							var a = Math.random();
				    ctx.fillStyle =  "rgb("+ r +","+ g +","+ b +")";
        			ctx.beginPath();
        			var x = arcX+2*R*k;
        			ctx.arc(x,y,R,0,2*Math.PI);
        			ctx.fill();
        			}


        		}
        	}
        };
		</script>
	</body>
</html>